<template>
    <Dialog
      :show="dialogConfig.show"
      :title="dialogConfig.title"
      :buttons="dialogConfig.buttons"
      :showCancel="true"
      @close="dialogConfig.show = false"
      width="1200px"
    >
      <el-form :model="formData" :rules="rules" ref="formDataRef" @submit.prevent>
        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item
              label="通知标题"
              prop="title"
              label-width="100px"
            >
              <el-input
                clearable
                placeholder="请输入通知标题"
                v-model.trim="formData.title"
              ></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-form-item label="内容" prop="content" label-width="100px">
          <EditorHtml v-model="formData.content"></EditorHtml>
        </el-form-item>
      </el-form>
    </Dialog>
  </template>

  <script setup>
  import { ref, reactive, getCurrentInstance, nextTick } from "vue";
  const { proxy } = getCurrentInstance();

  const api = {
    saveNotice: "/noticeInfo/saveNotice",
  };

  const dialogConfig = ref({
    show: false,
    title: "新增通知",
    buttons: [
      {
        type: "primary",
        text: "确定",
        click: (e) => {
          submitForm();
        },
      },
    ],
  });

  const formData = ref({});
  const formDataRef = ref();

  const rules = {
    title: [{ required: true, message: "请输入昵称" }],
    content: [{ required: true, message: "请输入通知内容" }],
  };


  const showEdit = (type, data) => {
    dialogConfig.value.show = true;
    nextTick(() => {
      formDataRef.value.resetFields();
      if (type === "add") {
        dialogConfig.value.title = "新增通知";
        formData.value = {
          introduction: "",
        };
      } else {
        dialogConfig.value.title = "修改通知";
        Object.assign(formData.value, data);
      }
    });
  };
  defineExpose({
    showEdit,
  });

  const emit = defineEmits(["reload"]);

  const submitForm = async () => {
    formDataRef.value.validate(async (valid) => {
      if (!valid) {
        return;
      }
      let params = {};
      Object.assign(params, formData.value);
      delete params.createTime;
      let result = await proxy.Request({
        url: api.saveNotice,
        params,
      });
      if (!result) {
        return;
      }
      dialogConfig.value.show = false;
      proxy.Message.success("保存成功");
      emit("reload");
    });
  };
  </script>

  <style lang="scss" scoped>
  </style>
